<template>
    <div class="chemical">
        <div class="add" @click="addCheckList()">添加检查表</div>
        <van-list :finished="finished" v-model="loading" finished-text="没有更多了">
            <van-cell v-for="(item, index) in list" :key="index" class="card">
                <van-tag v-if="item.Status ==0" size="mini" type="primary">未完成</van-tag>
                <van-tag v-if="item.Status == 5" size="mini" type="warning">进行中</van-tag>
                <van-tag v-if="item.Status == 10" size="mini" type="success">已完成</van-tag>
                <div>
                    <div @click="goDetail(item)">
                        <div class="ch_header">
                            <div>{{ index + 1 }}、{{ item.TName }}</div>
                        </div>
                        <van-row class="ch_row">
                            <van-col span="12" class="ch_col">
                                <img src="@/assets/Images/AppIcon/icon_equ_supplier.png" alt="" />
                                <div>{{ item.CreateChnName }}</div>
                            </van-col>
                            <van-col span="12" class="ch_col">
                                <img src="@/assets/Images/AppIcon/icon_list_danger.png" alt="" />
                                <div>{{ item.CreateDate }}</div>
                            </van-col>
                        </van-row>
                        <van-row class="ch_row">
                            <img src="@/assets/Images/AppIcon/icon_equ_property.png" alt="" />
                            <div>来源：{{ item.FromType == 0 ? "检查人添加" : "" }}</div>
                        </van-row>
                        <van-row>
                            <van-col span="12" class="ch_col">
                                <div class="mt-10">
                                    检查进度：共{{ item.TotalCnt }}项，已查{{
                    item.CheckCnt
                  }}项，异常{{ item.DangerCnt }}项
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                    <template v-if="item.Status < 10">
                        <van-divider />
                        <div class="dep_btm">
                            <div class="btm_item" @click="handleDelete(item)">
                                <img src="@/assets/Images/AppIcon/icon_list_edit.png" alt="" />
                                <div class="mr-10">删除该检查表</div>
                            </div>
                        </div>
                    </template>
                </div>
            </van-cell>
        </van-list>
        <!--检查表选择-->
        <danger-template-choose-dialog :show.sync="showadd" @callback="dangerTemplateCallback"></danger-template-choose-dialog>
    </div>
</template>

<script>
import { getCheckList, handleDelete, submitCheck } from "@/api/sytech/sytechDangerCheckTask";
import { mapGetters } from "vuex";
import { Dialog } from "vant";
import DangerTemplateChooseDialog from "../sytechDanger/sytechDangerCheckPlan/DangerTemplateChooseDialog.vue";
export default {
    components: {
        DangerTemplateChooseDialog,
    },
    data() {
        return {
            loading: false,
            finished: false,
            value: "",
            list: [],
            showadd: false,
            filter: {
                ctCode: this.$route.query.ctCode,
            },
        };
    },
    computed: {
        ...mapGetters(["CompanyCode"]),
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            this.filter.CompanyCode = this.CompanyCode;
            getCheckList(this.filter).then((res) => {
                this.loading = false;
                this.finished = true;
                this.list = res.data;
            });
        },
        dangerTemplateCallback(data) {
            let params = {
                ctCode: this.$route.query.ctCode,
                tCodes: data.TCodes,
                tNames: data.TNames,
            };

            submitCheck(params).then((res) => {
                this.getList();
            });
            this.showadd = false;
        },
        handleDelete(item) {
            Dialog.confirm({
                title: "询问",
                message: "确定要删除改任务的检查表吗?",
            })
                .then(() => {
                    // on confirm
                    handleDelete({ id: item.ID }).then((res) => {
                        this.$toast.success("删除成功！");
                        this.getList();
                        // console.log('asdasdsad',res);
                    });
                })
                .catch(() => {
                    // on cancel
                });
        },

        goDetail(item) {
            if (item.Status == 10) {
                this.$router.push({
                    path: "/SytechDanger/DangerTemplateCheckResult",
                    query: {
                        tCode: item.TCode,
                        tRand: item.TRand,
                    },
                });
            } else {
                this.$router.push({
                    path: "/SytechDangerCheckTemplateDetail",
                    query: {
                        tCode: item.TCode,
                        tRand: item.TRand,
                        CompanyCode: this.CompanyCode,
                        ctCode: this.$route.query.ctCode,
                    },
                });
            }
        },

        // 详情
        addCheckList(ChemCode) {
            this.showadd = true;
            // this.$router.push({
            //   path: "/SytechDanger/AddMyCheckList",
            //   query: { ctCode: this.$route.query.ctCode },
            // });
        },
        // 编辑
        edit(ChemCode) {
            this.$router.push({
                path: "/Chemical/Edit",
                query: { ChemCode: ChemCode },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.chemical {
    background-color: #e8f1f8;

    .info_search {
        padding: 10px;
        border-radius: 5px !important;

        .van-field__control {
            background-color: #ffffff !important;
        }
    }
}

.chemical_item {
    position: relative;
    padding: 10px;
}

.ch_header {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
}

.ch_row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
    }
    .ch_col {
        display: flex;
        align-items: center;
    }
}

.dep_btm {
    display: flex;
    justify-content: flex-end;

    .btm_item {
        display: flex;
        align-items: center;
        img {
            height: 15px;
            width: 15px;
            margin-right: 5px;
        }
    }
}

.van-divider {
    margin-top: 0px;
    margin-bottom: 0px;
}
</style>
